<template>
    <div>
        <group title="自我评价">
            <div class="content-text">{{resume.self_assessment}}</div>
        </group>
        <group title="在校经历">
            <div class="content-text">{{resume.association_activity}}</div>
        </group>
        <group title="项目经历">
            <div class="content-text">{{resume.project_experience}}</div>
        </group>
        <group title="实习经历">
            <div class="content-text">{{resume.internships}}</div>
        </group>
        <group title="获奖经历">
            <div class="content-text">{{resume.honor}}</div>
        </group>
        <group title="资格证书">
            <div class="content-text">{{resume.qualification}}</div>
        </group>
        <group title="职业技能">
            <div class="content-text">{{resume.skill}}</div>
        </group>
        <group title="兴趣爱好">
            <div class="content-text">{{resume.hobbies}}</div>
        </group>
        <div class="action-btn-container">
            <button class="edit-btn" @click="onEditResume">
                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                编辑微简历
            </button>
            <button class="upload-btn" @click="onUploadResume">
                <i class="fa fa-upload" aria-hidden="true"></i>
                上传简历文件
            </button>
            <button class="download-btn" @click="onDownloadResume">
                <i class="fa fa-download" aria-hidden="true"></i>
                下载简历文件
            </button>
        </div>

        <input
            @change="uploadFile"
            type="file"
            style="display: none"
            ref="fileUpload"
        >
    </div>
</template>

<script>
    import {
        Flexbox,
        FlexboxItem,
        Group,
        XButton
    } from 'vux';

    export default {
        name: 'Resume',
        components: {
            Flexbox,
            FlexboxItem,
            Group,
            XButton
        },

        mounted() {
            this.loadInitData();
        },

        data() {
            return {
                resume: {
                    self_assessment: '没有内容', // 自我评价
                    association_activity: '没有内容', // 在校经历
                    project_experience: '没有内容', // 项目经历
                    internships: '没有内容', // 实习经历
                    honor: '没有内容', // 获奖经历
                    qualification: '没有内容', // 资格证书
                    skill: '没有内容', // 职业技能
                    hobbies: '没有内容' // 兴趣爱好
                }
            }; // return
        },

        methods: {
            loadInitData() {
                this.$API.applicantRegister.getMicroResume()
                    .then(resp => {
                        let data = resp.data.data;
                        if (data.length) {
                            Object.assign(this.resume, data[0]);
                        }
                    }, err => {
                        let message = '发生未知错误';
                        if (!err) {
                            message = '网络错误';
                        }
                        if (err.errors instanceof Array) {
                            message = err.errors.join('\n');
                        }
                        console.log(message);
                    });
            }, // loadInitData

            onEditResume() {
                this.$router.push({path: '/resume-edit'});
            },

            onUploadResume() {
                this.$refs.fileUpload.click();
            },

            onDownloadResume() {
                this.$API.applicantRegister.getResumeFileUrl()
                    .then(resp => {
                        console.log(resp);
                    }, err => {
                    });
            }, // onDownloadResume()

            uploadFile(event) {
                let files = event.target.files || event.dataTransfer.files;

                if (!files.length) {
                    return;
                }
                let file = files[0];

                let params = new FormData();
                params.append('resume', file);

                this.$API.applicantRegister.resumeStorage(params)
                    .then(resp => {
                    }, err => {
                        if (err.response) {
                            let errors = err.response.data.errors;
                            console.log(errors.join('，'));
                        }
                    });

                this.$refs.fileUpload.value = null;
            } // uploadFile()
        } // methods
    };
</script>

<style lang="less" scoped>
    .content-text {
        padding: 1rem;
        white-space: pre-wrap;
    }

    .action-btn-container {
        display: flex;
        padding-top: 1rem;

        button {
            border: none;
            outline: none;
            width: 100%;
            padding: .8rem 0;
            font-size: 1rem;
            color: #ffffff;

            &:active {
                opacity: .8;
            }
        }

        .edit-btn {
            background-color: #1b8af4;
        }

        .upload-btn {
            background-color: #7c3bf4;
        }

        .download-btn {
            background-color: #20b907;
        }
    }
</style>